import {useNavigate} from "react-router";
import {LeftOutline} from "antd-mobile-icons";

interface TitleNavProps {
    title?: string,
    backTo: string
}
const TitleNav = (props: TitleNavProps) => {
    const navigate = useNavigate();

    return(
        <>
            <div style={{
                width: "100%",
                lineHeight: "3.3rem",
                marginTop: "-2rem",
                marginLeft: "-1rem",
                backgroundColor: "white",
                marginBottom: "1rem",
                position: "sticky",
                top: "0",
                padding: "0 1rem"
            }}>

                <h2 style={{
                    fontWeight: "bold",
                    width: "100%",
                    marginBottom: "0",
                    display: "flex",
                    justifyContent: "space-between",
                    alignItems: "center"
                }}>
                    <LeftOutline onClick={()=>navigate(props.backTo)} fontSize={"1.7rem"}/>
                    {props.title}
                </h2>
            </div>
        </>

    );
}

export default TitleNav;
